<template>
  <div>
    <el-row style="margin-top: 30px">
      <el-col :span="16">
        <div class="grid-content">
          <div style="width: 62px;height: 64px;background-color:#e0f2f1;border-radius:10px;align-self:center;margin: 0;font-size: 32px;text-align: center;line-height: 64px;float: left">{{ Project.FirstName }}</div>
          <div style="float: left;margin-left: 20px;">
            <div><h1 style="font-size: 20px;line-height: 15px;font-weight: bold;">{{ Project.name }} &nbsp;&nbsp;<el-tag size="mini" type="success">{{ Project.visibility }}</el-tag></h1></div>
            <div style="font-weight: normal;font-size: 14px;line-height: 16px;">项目ID：{{ Project.id }}</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">
          <el-dropdown :hide-on-click="false" trigger="click" style="float: right">
            <el-button type="primary" size="small">
              克隆 <i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item><span style="font-weight:600">使用SSH克隆</span>：</el-dropdown-item>
              <el-dropdown-item>
                <el-input v-model="Project.ssh_url_to_repo" size="medium" autosize placeholder="请输入内容">
                  <el-button
                    slot="append"
                    v-clipboard:copy="Project.ssh_url_to_repo"
                    v-clipboard:success="onCopy"
                    v-clipboard:error="onError"
                    class="el-icon-document-copy"
                  />
                </el-input>
              </el-dropdown-item>
              <el-dropdown-item><span style="font-weight:600">使用HTTPS克隆</span>：</el-dropdown-item>
              <el-dropdown-item>
                <el-input v-model="Project.http_url_to_repo" size="medium" autosize placeholder="请输入内容">
                  <el-button
                    slot="append"
                    v-clipboard:copy="Project.http_url_to_repo"
                    v-clipboard:success="onCopy"
                    v-clipboard:error="onError"
                    class="el-icon-document-copy"
                  />
                </el-input>
              </el-dropdown-item>
              <el-dropdown-item><span style="font-weight:600">快捷克隆</span>：</el-dropdown-item>
              <el-dropdown-item>
                <el-input v-model="gitCloneUrl" size="medium" autosize placeholder="请输入内容">
                  <el-button
                    slot="append"
                    v-clipboard:copy="gitCloneUrl"
                    v-clipboard:success="onCopy"
                    v-clipboard:error="onError"
                    class="el-icon-document-copy"
                  />
                </el-input>
              </el-dropdown-item>
              <el-dropdown-item divided>&nbsp;</el-dropdown-item>
              <el-dropdown-item>git账号：{{ UserOauth.GitLabUser }}</el-dropdown-item>
              <el-dropdown-item>git密码：</el-dropdown-item>
              <el-dropdown-item>
                <el-input v-model="UserOauth.GitLabPwd" size="medium" placeholder="" show-password />
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-col>
    </el-row>
    <el-row style="margin-top: 30px">
      <el-col :span="24">
        <el-link :underline="false" style="margin-right: 20px">-o- <strong style="color: #000;">{{
          Project.statistics.commit_count }}次提交</strong></el-link>
        <el-link :underline="false" style="margin-right: 20px"><i class="el-icon-s-operation" />
          <strong style="color: #000">{{ branchesCount }}个分支</strong></el-link>
        <el-link :underline="false" style="margin-right: 20px"><i class="el-icon-price-tag" /> <strong
          style="color: #000"
        >{{ tagNum }}个标签</strong></el-link>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="grid-content">
          <el-progress :percentage="100" :format="formatProgress" />
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-select v-model="nowbranche" size="medium" :loading="branchLoading" style="float: left" @visible-change="getBranchTag" @change="handleBrance">
          <el-option-group label="分支">
            <el-option
              v-for="item in branches"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            />
          </el-option-group>
          <el-option-group label="标签">
            <el-option
              v-for="item in tags"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            />
          </el-option-group>
        </el-select>

        <el-breadcrumb separator="/" style="float: left;line-height: 2.7;padding-left: 10px;">
          <el-breadcrumb-item><a href="javascript:void(0);" @click="handleGoRoot">{{ Project.name }}</a></el-breadcrumb-item>
          <template v-for="item in breadcrumb">
            <el-breadcrumb-item v-if="item.name != 'root'"><a href="javascript:void(0);" @click="handleGoBread(item)">{{ item.name }}</a></el-breadcrumb-item>
          </template>
        </el-breadcrumb>

      </el-col>
    </el-row>

    <el-row style="margin-top: 30px">
      <el-col :span="24">
        <div
          class="grid-content"
          style="height: 76px;background: #fafafa;color: #2e2e2e;border: 1px solid #e5e5e5;border-radius: 4px;margin-bottom: 16px;line-height: 76px"
        >
          <div
            style="width: 50px;height: 50px;float: left;padding-top: 13px;
    padding-left: 10px;"
          >
            <img :src="gitUser.avatar_url" width="50" height="50" style="border-radius: 50px;">
          </div>
          <div style="float: left;margin-left: 20px;margin-top: 5px;">
            <!--            todo 加链接地址-->
            <div><h1 style="font-size: 16px;line-height: 15px;font-weight: 600;"><el-link>{{ TopCommits.title }}</el-link></h1></div>
            <div style="font-weight: normal;font-size: 14px;line-height: 16px;">由 {{ TopCommits.committer_name }} 提交于 {{
              handleFormatTime(TopCommits.committed_date) }}
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col v-if="isFiles === false" :span="24">
        <template>
          <el-table
            v-loading="listLoading"
            :data="tableData"
            element-loading-text="Loading"
            highlight-current-row
            border
            style="width: 100%"
          >
            <el-table-column
              label="名称"
              width="400"
            >
              <template slot-scope="scope">
                <i v-if="scope.row.type === 'tree'" class="el-icon-folder" />
                <i v-if="scope.row.type === 'blob'" class="el-icon-tickets" />
                <span style="margin-left: 10px" @click="handleName(scope.row)"><a href="javascript:void(0)">{{ scope.row.name }}</a></span>
              </template>
            </el-table-column>
            <el-table-column
              prop="commitTitle"
              label="最后提交"
              width="400"
            />
            <el-table-column
              prop="commitCreateTime"
              label="最后更新"
              :formatter="handleCommitCreateTime"
            />
          </el-table>
        </template>
      </el-col>

      <el-col v-if="isFiles === true" :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold">{{ fileInfo.FileName }}</span> {{ fileInfo.FileSize }}字节
          </div>
          <pre v-html="fileInfo.content" />
        </el-card>
      </el-col>
    </el-row>

    <el-row v-if="isIndex === true" style="margin-top: 30px">
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold">README.md</span>
          </div>
          <template>
            <p>
              <vue-markdown :source="readme" />
            </p>
          </template>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getData } from '@/api/requestData'
import { parseTime } from '@/utils/index'
import VueMarkdown from 'vue-markdown'

export default {
  components: {
    VueMarkdown
  },
  data() {
    return {
      listLoading: true,
      branchLoading: true,
      tags: [], /**/// 标签 工程详情未返回tag数量
      tagNum: 0, // 标签数量
      tableData: [], // 文件列表
      branches: [], // 分支列表
      branchesCount: 0, // 分支数量
      nowbranche: '', // 当前分支
      projectName: '',
      ProjectId: '', // 当前项目ID
      nowpath: '', // 当前路径
      isIndex: '', // 是否首页
      isFiles: '', // 是否文件
      fileInfo: {}, // 文件内容
      readme: '', // README内容
      gitCloneUrl: '',
      Project: { // 项目信息
        statistics: {
          commit_count: 0
        },
        visibility: ''
      },
      TopCommits: { // 头部commit提交信息
        title: '',
        committer_name: '',
        committed_date: ''
      },
      gitUser: {}, // git用户信息
      breadcrumb: [], // 面包屑
      UserOauth: {
        GitLabUser: '',
        GitLabPwd: ''
      }
    }
  },
  created() {
    this.projectName = this.$route.params.pname
    this.fetchData()
  },
  methods: {
    onCopy(e) {
      // 复制成功
      this.$message.success('复制成功')
    },
    onError(e) {
      // 复制失败
      this.$message('复制失败')
    },
    fetchData() {
      this.listLoading = true
      // 获取用户列表
      const pid = this.$route.params.pid
      // const codeName = this.$route.params.codeName
      const codeBranch = this.$route.params.branch
      const codeRef = this.$route.params.path
      const gitServerId = this.$route.params.gitServerId
      getData('git/code/' + pid + '/' + codeBranch + '/' + codeRef).then(response => {
        this.listLoading = false
        this.tableData = response.data.list
        this.nowbranche = response.data.nowbranche
        this.ProjectId = response.data.ProjectId
        this.gitCloneUrl = response.data.gitCloneUrl
        if (response.data.nowpath === '') response.data.nowpath = 'root'
        this.nowpath = response.data.nowpath
        this.isIndex = response.data.isIndex
        this.isFiles = response.data.isFiles
        this.readme = response.data.readme
        this.tagNum = response.data.tagNum
        response.data.Project.tag_list = response.data.Project.tag_list.length
        this.Project = response.data.Project
        response.data.fileInfo.content = this.formatCode(response.data.fileInfo.content)
        response.data.Project.FirstName = response.data.Project.name.substring(0, 1)
        this.fileInfo = response.data.fileInfo
        if (response.data.TopCommits.length > 0){
          this.TopCommits = response.data.TopCommits
        }
        this.gitUser = response.data.gitUser
        this.UserOauth = response.data.UserOauth
        this.branches = response.data.branches
        this.branchesCount = response.data.branches.length
        var breadcrumb = this.nowpath.split('&')
        var ppath = ''
        var i = 1
        for (var p in breadcrumb) {
          if (i < breadcrumb.length) {
            ppath = ppath + breadcrumb[p] + '-'
          } else {
            ppath = ppath + breadcrumb[p]
          }
          var tmpBreadcrumb = { 'name': breadcrumb[p], 'path': ppath }
          this.breadcrumb.push(tmpBreadcrumb)
          i++
        }
        if (codeRef !== 'root') {
          this.tableData.unshift({ name: '..', commitTitle: '', commitCreateTime: '' })
        }

      }).catch(() => {
        this.listLoading = false
      })
    },
    formatProgress(percentage) {
      return ''
    },
    formatCode(code) {
      return code
    },
    handleName(row) {
      if (row.name === '..') {
        return this.$router.go(-1)
      }
      var path = row.path.replace(/\//g, '&')
      this.$router.push({ path: '/git/code/' + this.ProjectId + '/' + this.projectName + '/' + this.nowbranche + '/' + path })
    },
    handleBrance(row) {
      this.$router.push({ path: '/git/code/' + this.ProjectId + '/' + this.projectName + '/' + row + '/' + this.nowpath })
    },
    handleGoRoot(row) {
      this.$router.push({ path: '/git/code/' + this.ProjectId + '/' + this.projectName + '/' + this.nowbranche + '/root' })
    },
    handleGoBread(row) {
      this.$router.push({ path: '/git/code/' + this.ProjectId + '/' + this.projectName + '/' + this.nowbranche + '/' + row.path })
    },
    handleCommitCreateTime(row) {
      if (row.commitCreateTime === undefined || row.commitCreateTime === '') return ''
      return this.handleFormatTime(row.commitCreateTime)
    },
    getBranchTag() {
      const pid = this.$route.params.pid
      getData('/git/public/branch/tag/' + pid).then((response) => {
        this.branches = response.data.branches
        this.tags = response.data.tags
        this.branchLoading = false
      })
    },
    handleFormatTime(times) {
      var minute = 1000 * 60
      var hour = minute * 60
      var day = hour * 24
      var week = day * 7
      var month = day * 30

      var time1 = new Date().getTime()// 当前的时间戳
      var time2 = Date.parse(new Date(parseTime(times)))// 指定时间的时间戳
      var time = time1 - time2
      var result = null
      if (time < 0) {
        alert('设置的时间不能早于当前时间！')
      } else if (time / month >= 1) {
        result = parseInt(time / month) + '月前'
      } else if (time / week >= 1) {
        result = parseInt(time / week) + '周前'
      } else if (time / day >= 1) {
        result = parseInt(time / day) + '天前'
      } else if (time / hour >= 1) {
        result = parseInt(time / hour) + '小时前'
      } else if (time / minute >= 1) {
        result = parseInt(time / minute) + '分钟前'
      } else {
        result = '刚刚'
      }
      return result
    }
  }
}
</script>

<style>
.grid-content {
  min-height: 36px;
}
.el-progress-bar{
  padding-right: unset;
}
</style>
